<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OUR</title>
    <link rel="stylesheet" href="../css/our.css">
</head>

<body>

    <div id="container">
        <!-- Page 1 -->
        <div class="page page1">
            <div class="p1_l">
                <div class="thank1">
                    <p>AT LAST</p>
                    <p>SPECIAL THANKS</p>
                </div>
                <div class="thank2">
                    我们#所有的小组成员
                </div>
                <div class="thank3">
                    Group member
                </div>
            </div>
            <div class="p1_r">
                <div class="group_mumber">
                    <span
                        style="font-size: 4vw;font-weight: 700;text-decoration: underline;margin-right: 1vw;color: #252525;">05</span>
                    <div style="display: flex;flex-direction: column;color: #252525;">
                        <p>There were five</p>
                        <p> of us in our group</p>
                    </div>
                </div>
                <div class="during">
                    <span
                        style="font-size: 4vw;font-weight: 700;text-decoration: underline;margin-right: 1vw;color: #252525;">01</span>
                    <span>lt took us a weekto make it</span>
                </div>
            </div>
            <div class="arrow">
                <img src="../images/arrow.png" alt="">
            </div>
        </div>

        <div class="page page2">
            <div class="page2_l">
                <div class="dot"></div>
                <div class="mumber_title">
                    <div>组员介绍</div>
                    <div>
                        <p>Group member </p>
                        <p>introduction</p>
                    </div>
                </div>
            </div>

            <div class="page2_r">
                <div class="mumber_list">
                    <div class="mumber_item" style="width: 35vw;">
                        <div class="mumber_item_l">
                            <img src="../images/CJY.jpg" alt="">
                        </div>
                        <div class="mumber_item_r">
                            <div class="mumber_item_r_t">
                                <div class="mum_name">陈杰妍</div>
                                <div class="name_bar"></div>
                            </div>
                            <div class="mumber_item_r_b">
                                <div class="mum_intro">
                                    <p>优秀作业、作业展示代码编写</p>
                                    <p>资源代码编写</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mum_row">
                        <div class="mumber_item">
                            <div class="mumber_item_l">
                                <img src="../images/QSJ.jpg" alt="">
                            </div>
                            <div class="mumber_item_r">
                                <div class="mumber_item_r_t">
                                    <div class="mum_name">秦思洁</div>
                                    <div class="name_bar"></div>
                                </div>
                                <div class="mumber_item_r_b">
                                    <div class="mum_intro">
                                        <p>导航栏制作</p>
                                        <p>课程代码编写</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mumber_item">
                            <div class="mumber_item_l">
                                <img src="../images/SJX.jpg" alt="">
                            </div>
                            <div class="mumber_item_r">
                                <div class="mumber_item_r_t">
                                    <div class="mum_name">苏嘉欣</div>
                                    <div class="name_bar"></div>
                                </div>
                                <div class="mumber_item_r_b">
                                    <div class="mum_intro">
                                        <p>UI设计
                                        </p>
                                        <p>
                                            OUR代码编写</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mum_row">
                        <div class="mumber_item">
                            <div class="mumber_item_l">
                                <img src="../images/GX.jpg" alt="">
                            </div>
                            <div class="mumber_item_r">
                                <div class="mumber_item_r_t">
                                    <div class="mum_name">高轩</div>
                                    <div class="name_bar"></div>
                                </div>
                                <div class="mumber_item_r_b">
                                    <div class="mum_intro">
                                        <p>资源代码编写
                                        </p>
                                        <p>
                                            </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mumber_item">
                            <div class="mumber_item_l">
                                <img src="../images/LJ.jpg" alt="">
                            </div>
                            <div class="mumber_item_r">
                                <div class="mumber_item_r_t">
                                    <div class="mum_name">林静</div>
                                    <div class="name_bar"></div>
                                </div>
                                <div class="mumber_item_r_b">
                                    <div class="mum_intro">
                                        <p>首页代码编写
                                        </p>
                                        <p></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- header -->
    <nav id="navbar">
        <div class="header">
            <div class="nav-wrapper">
                <div class="nav-container">
                    <div class="nav-l">
                        <!-- logo -->
                        <div class="logo">
                            <img src="../images/logo.png" class="logo" alt="Logo">
                        </div>
                        <!-- list -->
                        <nav class="nav">
                            <div class="divider"></div>
                            <a href="../index.html">首页</a>
                            <a href="./curriculum.html" class="curriculum">课程</a>
                            <a href="./resources.html">资源</a>
                            <a href="./Excellent%20assignment.html">展示</a>
                            <a href="#" class="our">OUR</a>
                        </nav>
                    </div>
                    <div class="nav-r">
                        <!-- git -->
                        <a href="https://gitee.com/chen-jieyan-jy/group-assignments.git" target="_blank" class="git">
                            <button>Gitee ·</button>
                        </a>
                        <!-- mine -->
                        <div class="mine" id="mine">
                            <img src="../images/avatar.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 遮罩层 -->
        <div class="overlay" id="overlay"></div>
        <!--侧边栏-->
        <div id="side-content" class="side-content">
            <!--头像-->
            <div class="avatar-content">
                <img class="avatar-image" src="../images/avatar.jpg">
                <div class="avatar-nickName-content">
                    <div class="avatar-nickName">倒霉熊</div>
                    <div class="avatar-number">编号：000001</div>
                </div>
            </div>
            <!--我的课程-->
            <div class="my-course-content">
                <div class="my-course-title">我的课程</div>
                <div class="my-course-en">MY COURSE</div>
            </div>
            <!--中间容器-->
            <div class="middle-content">
                <div class="content-currency" style="padding-top: 4%;">
                    <div class="content-currency-font">账号管理</div>
                    <div><svg t="1718820997424" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2620" width="200" height="200">
                            <path
                                d="M613.504 512L274.752 173.248l90.496-90.496L794.496 512l-429.248 429.248-90.496-90.496z"
                                fill="#666666" p-id="2621"></path>
                        </svg></div>
                </div>
                <div class="content-currency">
                    <div class="content-currency-font">个人资料</div>
                    <div><svg t="1718820997424" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2620" width="200" height="200">
                            <path
                                d="M613.504 512L274.752 173.248l90.496-90.496L794.496 512l-429.248 429.248-90.496-90.496z"
                                fill="#666666" p-id="2621"></path>
                        </svg></div>
                </div>
                <div class="content-currency" style="border: 0;padding-bottom: 4%">
                    <div class="content-currency-font">通用设置</div>
                    <div><svg t="1718820997424" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2620" width="200" height="200">
                            <path
                                d="M613.504 512L274.752 173.248l90.496-90.496L794.496 512l-429.248 429.248-90.496-90.496z"
                                fill="#666666" p-id="2621"></path>
                        </svg></div>
                </div>
            </div>
            <!--底部间容器-->
            <div class="bottom-content">
                <div class="content-currency" style="padding-top: 2.5%;">
                    <div class="content-currency-font">隐私政策</div>
                    <div><svg t="1718820997424" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2620" width="200" height="200">
                            <path
                                d="M613.504 512L274.752 173.248l90.496-90.496L794.496 512l-429.248 429.248-90.496-90.496z"
                                fill="#666666" p-id="2621"></path>
                        </svg></div>
                </div>
                <div class="content-currency" style="border: 0; padding-bottom: 3%;">
                    <div class="content-currency-font">帮助中心</div>
                    <div><svg t="1718820997424" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2620" width="200" height="200">
                            <path
                                d="M613.504 512L274.752 173.248l90.496-90.496L794.496 512l-429.248 429.248-90.496-90.496z"
                                fill="#666666" p-id="2621"></path>
                        </svg></div>
                </div>
            </div>
            <!--退出登录-->
            <div class="login-out-content">
                退出登录
            </div>
        </div>
    </nav>

    <script>
        // 保留之前的导航栏背景颜色变化的JavaScript
        window.onscroll = function a() {
            let h = document.documentElement.scrollTop || document.body.scrollTop;
            let headerTop = document.getElementById('navbar');
            if (h > 100) {
                headerTop.style.background = '#fff';
            } else if (h <= 100) {
                headerTop.style.background = "rgba(0, 0, 0, 0)";
            }
        };

        // 新增控制侧边栏和遮罩层的JavaScript
        document.addEventListener('DOMContentLoaded', function () {
            let mine = document.getElementById('mine');
            let sideContent = document.getElementById('side-content');
            let overlay = document.getElementById('overlay');
            let isOpen = false;

            // 点击mine容器显示侧边栏和遮罩层
            mine.addEventListener('click', function (event) {
                sideContent.classList.add('open');
                overlay.classList.add('open');
                isOpen = true;
                event.stopPropagation(); // 阻止事件冒泡，防止触发document的点击事件
            });

            // 点击侧边栏以外的地方隐藏侧边栏和遮罩层
            document.addEventListener('click', function (event) {
                if (isOpen && !sideContent.contains(event.target)) {
                    sideContent.classList.remove('open');
                    overlay.classList.remove('open');
                    isOpen = false;
                }
            });

            // 阻止点击侧边栏和遮罩层时触发document的点击事件
            sideContent.addEventListener('click', function (event) {
                event.stopPropagation();
            });

            overlay.addEventListener('click', function (event) {
                sideContent.classList.remove('open');
                overlay.classList.remove('open');
                isOpen = false;
            });
        });

        // script.js
        let currentPage = 0;
        const totalPages = document.querySelectorAll('.page').length;

        document.addEventListener('wheel', (event) => {
            if (event.deltaY < 0) {
                // 向上滚动
                if (currentPage > 0) {
                    currentPage--;
                    scrollToPage(currentPage);
                }
            } else if (event.deltaY > 0) {
                // 向下滚动
                if (currentPage < totalPages - 1) {
                    currentPage++;
                    scrollToPage(currentPage);
                }
            }
        });

        function scrollToPage(pageNumber) {
            const container = document.getElementById('container');
            container.style.transform = `translateY(-${pageNumber * 100}vh)`;
        }

    </script>

</body>

</html>